<template>
  <div class="mv-box">
    <ul class="cates-list">
      <li class="cates-item">
        <span class="item-tit" href="">地区:</span>
      </li>
      <li class="cates-item" v-for="(it,index) in cataes" @click="changeCates(index)">
        <span :class="catatesActive==index ? 'item-tit active-tit':'item-tit' " href="">{{ it.title }}</span>
      </li>
    </ul>
    <ul class="new-mv-list">
      <li class="new-mv-item" v-for="(item,index) in mvList" :key="index" @click="mvInfo(item.id)">
        <img class="new-mv-item-cover" :src="item.cover" alt="" srcset="">
        <p class="new-mv-item-txt">{{ item.name }} - {{ item.artistName }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import {getHostMV} from '@/request/Api.js'
export default {
  name:'MV',
  created(){
    this.getHostMv()
  },
  data(){
    // 全部,内地,港台,欧美,日本,韩国
    return {
      mvList:[],
      requestParams:{
        limit:30,
        area:''
      },
      cataes:[{
        title:'全部',
        params:''
      },{
        title:'内地',
        params:'内地'
      },{
        title:'港台',
        params:'港台'
      },{
        title:'欧美',
        params:'欧美'
      },{
        title:'日本',
        params:'日本'
      },{
        title:'韩国',
        params:'韩国'
      },],
      catatesActive:0
    }
  },
  methods:{
    // 获取最新mv列表
    async  getHostMv(limit,area){
      const {data:res} = await getHostMV(limit,area)
      if(res.code !==200) {
        return this.$message('获取数据失败')
      }
      console.log('推荐mv列表',res);
      this.mvList = res.data
    },
    //初始化所有的关于分页的东西
    initListParams(){

    },
    // 更换类别
    changeCates(idx) {
      this.catatesActive = idx
      this.getHostMv(this.requestParams.limit,this.cataes[idx].params)
    },
    // 跳转mv视频详情
    mvInfo(mvid){
      this.$router.push({name:'MVINFO',params:{mvid}})
    }
  }
}
</script>

<style lang="less" scoped>
.cates-list {
  width: 100%;
  overflow: hidden;
  font-size: .7rem;
  .cates-item {
    float: left;
    padding: .4rem;
    .item-tit {
      cursor: pointer;
    }
    .active-tit {
      color: #fff;
        background: rgb(216, 13, 13);
        padding: 0px .43rem;
        border-radius: 10px;
    }
  }
}
.new-mv-list {
  width: 100%;
  .new-mv-item {
    padding: .3rem;
    width: 25%;
    height: 11rem;
    overflow: hidden;
    float: left;
    .new-mv-item-cover {
      border-radius: 5px;
      width: 100%;
      height: 8rem;
      object-fit: cover;
    }
    .new-mv-item-txt {
      margin-top: .4rem;
      width: 100%;
      max-height: 3rem;
      font-size: .7rem;
    }
  }
}
</style>